<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            :equTypeValue="'33'"
            @conditionChange="selectGroupChange($event)"
          >
            <template slot="space_2">
              <bjRangeCalendar
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-model="defaultTime"
                @change="calendarChange"
                :showTime="false"
              ></bjRangeCalendar>
            </template>
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="用电监测">
        <div>
          <a-button type="primary" @click="handelExport()">导出</a-button>
        </div>
      </div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column field="operate" width="180" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoDetails(row)">
                  数据明细
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 明细弹窗 -->
    <detailModal
      :visible.sync="detailModalVisible"
      :dataSource="rows"
    ></detailModal>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/environmental-app/AssociativeSelectGroup";
import bjRangeCalendar from "@/components/bj-range-calendar";
import detailModal from "./components/detailModal";
import { downLoadFileByArraybuffer } from "@/utils";
import { getZhYdList, exportZHYDData } from "@/api/wisdom-beam/green-app.js";
export default {
  components: {
    AssociativeSelectGroup,
    bjRangeCalendar,
    detailModal,
  },
  data() {
    return {
      detailModalVisible: false,
      rows: {},
      conditionsData: {},
      defaultTime: [],
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
          isDefault: true,
          allowClear: false,
        },
        //设备
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择用电设备",
        },
      ],
      columns: [
        {
          title: "区域",
          key: "region",
        },
        {
          title: "设备名称",
          key: "equName",
        },
        {
          title: "累计电量(kwh)",
          key: "sumElec",
        },
        {
          title: "累计监测时长(天)",
          key: "sumTime",
        },
        {
          title: "预警次数",
          key: "sumWarn",
        },
      ],
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {},
  methods: {
    gotoDetails(row) {
      this.rows = row;
      this.detailModalVisible = true;
    },
    //导出
    handelExport() {
      this.loading = true;
      let { mixin, defaultTime } = this;
      exportZHYDData({
        type: "1",
        equCode: mixin,
        startTime: defaultTime[0],
        endTime: defaultTime[1],
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "用电监测");
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.search();
    },
    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },
    calendarChange(dates = []) {
      this.defaultTime = dates;
      this.search();
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //查询表格
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        conditionsData: { mixin },
        defaultTime,
      } = this;
      getZhYdList({
        page,
        pageSize,
        type: "1",
        equCode: mixin,
        startTime: defaultTime[0],
        endTime: defaultTime[1],
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.records || [];
          this.pager.total = data?.result?.total || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped></style>
